<template>
	<view class="page-wapper">
		
		<view class="page-content">
		
			<u-form ref="formdom" label-position="top" errorType="toast" 
				:model="state.formdata" :rules="rules" >
				<view class="form-title">
					资料修改	
				</view>
				<u-form-item prop="avatar">
					<view class="inputwapper" @tap="upimg('avatar')">
						<view class="label">
						头像：
						</view>
						<view class="">
							<image :src="avatar" class="avatar" mode="" style="width: 90rpx;height: 90rpx;"></image>
						</view>

					</view>
				</u-form-item>
				<u-form-item prop="real_name">
					<view class="inputwapper">
						<view class="label">
						 <span>*</span>昵称
						</view>
						<input type="text"  placeholder="请输入昵称" v-model="state.formdata.nickname" />
				
					</view>
				</u-form-item>
				
				<view class="form-title">
					账号信息	
				</view>
				<u-form-item prop="mobile">
					<view class="inputwapper">
						<view class="label">
						 <span>*</span>手机号
						</view>
						<input type="text"  placeholder="请输入昵称" :value="info.mobile" :disabled="true" />
				
					</view>
				</u-form-item>
				<u-form-item prop="password">
					<view class="inputwapper">
						<view class="label">
						 <span>*</span>密码
						</view>
						<input type="text"  placeholder="密码" v-model="state.formdata.password"/>
				
					</view>
				</u-form-item>
				<u-form-item prop="password1">
					<view class="inputwapper">
						<view class="label">
						 <span>*</span>新密码
						</view>
						<input type="text"  placeholder="请输入新密码" v-model="state.formdata.password1"/>
				
					</view>
				</u-form-item>
			
				
			
		
				</u-form>
				
				<view class="" style="height: 30rpx;">
					
				</view>
				
				<button class="button" @tap="onsubmit" v-if="state.obj.status!=1" >提交</button>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref,
		onMounted,
		getCurrentInstance,
		nextTick
	} from 'vue';
	import {
		onLoad,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app'
	import LC from '@/LC'
	let state = reactive({
		
		formdata: {
			avatar:'',
			avatar_full:'',
			nickname:'',
			password:'',
			password1:'',
			
		},
		obj:{},

		data: []
	})


let info = computed(() => LC.$store('user').info)
const rules = {
		avatar: [{
				required: true,
				message: '请上传头像',
				trigger: ['blur', 'change']
			}
		],
		nickname: [{
				required: true,
				message: '请填入昵称',
				trigger: ['blur', 'change']
			}
		],
		password1: [{
					validator: (rule, value, callback) => {
									// 上面有说，返回true表示校验通过，返回false表示不通过
									// uni.$u.test.mobile()就是返回true或者false的
									return value===state.formdata.password
								},
					message: "两次密码不一致",
					trigger: ['blur', 'change']
				}
		],
		
		
	}
	let avatar=computed(()=>{
		if(state.formdata.avatar_full){
			return state.formdata.avatar_full
		}
			
	})
	onMounted(()=>{
		state.formdata.nickname=info.value.nickname
		
		state.formdata.avatar_full=info.value.avatar
		state.formdata.avatar=getPathFromURL(state.formdata.avatar_full)
	})
	
	function getPathFromURL(url) {
	    try {
	        const urlObj = new URL(url);
	        return urlObj.pathname;
	    } catch (e) {
	        console.error(e.message);
	        return null;
	    }
	}
	// async function init(){
	// 	const res = await LC.$api.user.authInfo(state.formdata)
	// 	if (res.code == 1) {
	// 		state.obj=res.data
	// 		state.formdata.id_card=res.data.id_card
	// 	state.formdata.real_name=res.data.real_name
	// 	}
	// }


	let formdom = ref(null)
	function onsubmit() {
		
		formdom.value.validate().then(res => {
			send()
		}).catch(err => {
			formdom.value.clearValidate()

			console.log('表单错误信息：', err);
		})
	}
	function parse(){
		uni.getClipboardData({
		  success: function(res) {
		   state.formdata.address=res.data
		    // 粘贴到文本框中
		   
		  }
		})
	}
	async function send() {
	
			
			const res = await LC.$api.user.profile(state.formdata)
			if (res.code == 1) {
				LC.$store('user').userinfo()
				uni.navigateBack({
				success(){
					uni.$u.toast('提交成功')
				}
				})
				
			
			}
			return
	



	}
	
	
	function upimg(key) {
		uni.chooseImage({
			success: async (chooseImageRes) => {
				const tempUrl = chooseImageRes.tempFilePaths[0];
				uploadPay_image(tempUrl, key);
			},
		});
	}
	async function uploadPay_image(tempUrl, key) {
		if (!tempUrl) return;
		let {
			url,
			fullurl
		} = await LC.$api.app.upload(tempUrl, 'ugc');
		state.formdata[key] = url;
		state.formdata[key + '_full'] = fullurl;
		console.log(state.formdata)
	}
	
</script>

<style lang="scss" scoped>
	.tip{
		  
		    height: 104rpx;
		    padding: 16rpx 30rpx;
		    margin: 20rpx 30rpx;
		    background: #fefbea;
		    font-size: 20rpx;
		    font-weight: 400;
	}
	.textarea{
		background: rgb(248, 248, 248);
		margin: 0 30rpx;
	}
	.form-title{
		
		    height: 84rpx;
		    background: #f8f8f8;
		    padding: 0 30rpx;
		    font-size: 24rpx;
		    font-weight: 500;
		    color: #666;
		    line-height: 84rpx;
	}
	.img-wapper{
		padding: 55rpx 21rpx;
		background: #FFFFFF;
		align-items: stretch;
		border-radius: 15rpx;
		
		width: 100%;
		.left{
			.title1{
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 31rpx;
				color: #333333;
				line-height: 42rpx;
			}
			.title2{
				margin-top: 10rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 23rpx;
				color: #999999;
			}
		}
		.icon{
			width: 383rpx;
			height: 240rpx;
			margin-left: auto;
		}
	}
	::v-deep .u-form-item__body{
		padding: 0rpx 0;
	}
	.button {
	
	
		height: 86rpx;
		flex-shrink: 0;
		margin:0 30rpx;
		background-color: #FC5652;
		border-radius: 15rpx;
		font-weight: 400;
		font-size: 31rpx;
		
		line-height: 86rpx;
		color: #fff;
	
		margin-top: auto;
	
		&.dis {
			background-color: #CCCCCC;
		}
	
		&::after {
			display: none;
		}
	
	
	}
	
	.inputwapper{
		display:flex;
		width: 100%;
		align-items: center;
		padding:31rpx 23rpx;
		background: #FFFFFF;
		border-bottom: 2rpx solid #e4e4e4;
		border-radius: 15rpx;
		.icon{
			margin-left: auto;
			width: 53rpx;
			height: 53rpx;
		}	
		
		.label{
			width: 135rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 800;
			font-size: 27rpx;
			color: #111;
			line-height: 38rpx;
			span{
				color: red;
			}
		
		}
		input{
			flex:1;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 27rpx;
			color: #333;
		}
	}
	.tab {
		margin-bottom: 10rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 27rpx;
		color: #999999;
		line-height: 38rpx;

		.tabitem {
			margin-right: 30rpx;
		}

		.active {
			font-weight: 600;
			color: #333333;
		}
	}

	.left-icon {
		display: flex;
		width: 41rpx;
		height: 42rpx;
	}
	.page-wapper{
	flex:1;
	display:flex;
	flex-direction: column;
	}
	.page-content {
		flex:1;
		display:flex;
		flex-direction: column;
		
		padding-top: 10rpx;
	}
</style>